<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function () {
		var deleteFun = function(arg1) {
			//在事件响应时的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
			//let $trObj = $(arg1).parent().parent();

			//let $trObj = $(this).parent().parent();
			let $trObj = $(this).parents("tr");

			let name = $trObj.find("td:first").text();
			/*
			confirm是JavaScript语言提供的一个确认提示框函数
			 */
			let confirm1 = confirm("是否删除["+name+"]");
			if (confirm1) {
				$trObj.remove();
			}
			return false;//可以阻止元素的默认行为
		};
		//给[Submit]按钮绑定单击事件
		$("#addEmpButton").click(function () {
			//获取输入框，姓名，邮箱和工资信息
			var $name = $("#empName").val();
			var $email = $("#email").val();
			var $salary = $("#salary").val();

			//创建一个行标签对象，添加到显示数据的表格
			let $1 = $("<tr>" +
					"<td>"+$name+"</td>" +
					"<td>"+$email+"</td>" +
					"<td>"+$salary+"</td>" +
					"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
					"</tr>"
			);
			$1.appendTo($("#employeeTable"));

			//给添加的行绑定单击事件
			$1.find("a").click(deleteFun);
		});

		//给删除的a标签绑定单击事件
		//方式一
		// $("a").click(function () {
		// 	deleteFun(this);
		// 	return false;//可以阻止元素的默认行为
		// });
		//方式二
		$("a").click(deleteFun);
	});
	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
